import React from 'react';
import { Tabs } from 'antd';
import { OPER_TYPE } from '../../utils/constant';
/**
 * @Method Compare
 * @prop {Object} beforeCom 修改前的组件
 * @prop {Object} afterCom 修改后的组件
 * @prop {Object} operType 操作类型，用于判断如何展示对比tab
 *
 */

function Compare(props) {
  return (
    <div>
      {OPER_TYPE._PUBLISH !== props.operType && <div style={{ marginBottom: '20px' }}>
        请注意，存在修改操作的内容为<span style={{ color: '#006eff' }}>蓝色字体</span>，存在删除操作的内容为
        <span style={{ color: '#e54545' }}>红色字体</span>
      </div>}

      {/* 导入或者新增 */}
      {(OPER_TYPE._ADD === props.operType || OPER_TYPE._INPORT === props.operType) && <>{props.afterCom}</>}
      {/* 修改 */}
      {(OPER_TYPE._UPDATE === props.operType ||
        OPER_TYPE._ONLINE === props.operType ||
        OPER_TYPE._OFFLINE === props.operType) && (
        <Tabs style={{ width: '100%', margin: '10px 0' }} defaultActiveKey='1'>
          <Tabs.TabPane tab={'修改后的数据'} key='1'>
            {props.afterCom}
          </Tabs.TabPane>
          <Tabs.TabPane tab={'原数据'} key='2'>
            {props.beforeCom}
          </Tabs.TabPane>
        </Tabs>
      )}
      {/* 删除 */}
      {OPER_TYPE._DELETE === props.operType && <>{props.beforeCom}</>}
      {/* 发布 */}
      {OPER_TYPE._PUBLISH === props.operType && (
        <Tabs style={{ width: '100%', margin: '10px 0' }} defaultActiveKey='1'>
          <Tabs.TabPane tab={'本次发布数据'} key='1'>
            {props.com1}
          </Tabs.TabPane>
          {props.com2 && <Tabs.TabPane tab={'当前在线数据1'} key='2'>
            {props.com2}
          </Tabs.TabPane>}
          {props.com3 && <Tabs.TabPane tab={'当前在线数据2'} key='3'>
            {props.com3}
          </Tabs.TabPane>}
        </Tabs>
      )}
    </div>
  );
}
export default Compare;
